<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       <div id="root">
           
            <div>学校</div>
            <h3>{{name}}</h3>
            <div>学生</div>
            <div>
                名字:<span>{{student.name}}</span>
            </div>
            <div>
                性别: <span>{{student.sex}}</span>
            </div>
            <br/>
            <button @click="addSex">添加性别</button>
            <button @click="student.sex=student.sex+'s'">性别</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el: '#root', 
                data(){
                    return {
                        name:'学校2',
                        student:{
                            id:'001',name:'马冬梅',
                        }
                    }
                },
                computed: {
                    
                },
                methods:{
                    addSex(){
                        // Vue.set(this.student,'sex','aaa')
                        this.$set(this.student ,'sex','aaa')
                    }
                }
            })
        </script>
    </body>
</html>
